<template>
  <div class="UserManagementList">
    <el-card>
      <h3><span class="tag"></span> 用户列表</h3>
      <div class="searchBox">
        <span class="txt">注册时间：</span>
        <el-date-picker
          v-model="userTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
          size="small"
        >
        </el-date-picker>
        <span class="margin"></span>
        <span class="txt">ID：</span>
        <el-input v-model="id" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="txt">手机号：</span>
        <el-input
          v-model="phone"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g,'')"
          clearable
          size="small"
        ></el-input>
        <span class="margin"></span>
        <span class="txt">性别：</span>
        <el-select
          v-model="userOptionVal"
          size="small"
          placeholder="请选择性别"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="margin"></span>
        <span class="txt">邀请码：</span>
        <el-input v-model="InvitationCode" clearable size="small"></el-input>
        <!-- <el-button class="btn" icon="el-icon-search" size="small"
          >查询搜索</el-button
        > -->
      </div>
      <div class="searchBox">
        <span class="txt">系统：</span>
        <el-select v-model="names" size="small" placeholder="请选择系统">
          <el-option label="不限" value=""> </el-option>
          <el-option label="安卓" value="android"> </el-option>
          <el-option label="IOS" value="ios"> </el-option>
        </el-select>
        <span class="margin"></span>

        <span class="txt">一级渠道：</span>
        <el-select
          v-model="utm_channel_val"
          size="small"
          placeholder="请选择一级渠道"
        >
          <el-option
            v-for="item in utm_channel"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <span class="margin"></span>

        <span class="txt">二级渠道：</span>
        <el-select
          v-model="sources_val"
          size="small"
          placeholder="请选择一级渠道"
        >
          <el-option
            v-for="item in sources"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <span class="margin"></span>
        <span class="txt">状态：</span>
        <el-select v-model="status" size="small" placeholder="请选状态">
          <el-option label="不限" value=""> </el-option>
          <el-option label="正常" value="1"> </el-option>
          <el-option label="禁封" value="2"> </el-option>
          <el-option label="注销" value="3"> </el-option>
        </el-select>
        <span class="margin"></span>
        <span class="txt" style="padding-right: 10px">流失天数</span>
        <el-input
          onkeyup="value=value.replace(/[^\d]/g,'')"
          v-model="lossStart"
          clearable
          style="width: 100px"
          size="small"
        ></el-input>
        <span class="txt" style="padding-right: 10px">至</span>
        <el-input
          onkeyup="value=value.replace(/[^\d]/g,'')"
          v-model="lossEnd"
          clearable
          style="width: 100px"
          size="small"
        ></el-input>
        <span class="margin"></span>
        <el-button class="btn" size="small" @click="userListBtn"
          >搜索查询</el-button
        >
      </div>
      <div class="typeBox">
        <div class="left">
          <el-radio-group
            @change="userListBtn"
            v-model="userType"
            size="small"
            fill="#7b94d8"
          >
            <el-radio-button label="">全部用户</el-radio-button>
            <el-radio-button label="1">注册用户</el-radio-button>
            <el-radio-button label="2">认证用户</el-radio-button>
            <el-radio-button label="3">工会用户</el-radio-button>
            <el-radio-button label="4">合作用户</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <el-button icon="el-icon-paperclip" size="small" @click="exportExcel"
            >导出EXCEL</el-button
          >
        </div>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" label="全选" width="55">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="100">
          <template slot-scope="scope">
            <div class="imgBox">
              <!-- <img
                :src="scope.row.avatar"
                alt
                preview
                v-if="scope.row.avatar != ''"
                class="img"
              /> -->
              <el-image
                v-if="scope.row.avatar != ''"
                class="img"
                :src="scope.row.avatar"
                :preview-src-list="imgArr(tableData)"
              >
              </el-image>
              <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
                class="img"
              />
              <img
                class="imgV"
                src="../../assets/image/photoRealAuth.png"
                alt=""
                v-if="scope.row.photoRealAuth == 1"
              />
              <span class="spanA" v-if="scope.row.onlineStatus == 1"></span>
              <span class="spanB" v-if="scope.row.onlineStatus == 0"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="用户ID" width="100">
        </el-table-column>
        <!-- <el-table-column prop="cid" label="CID"> </el-table-column> -->
        <el-table-column prop="name" label="昵称" width="200">
        </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="identity" label="身份"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="registrationTime" label="注册时间" width="200">
        </el-table-column>
        <el-table-column
          prop="last_login_time"
          label="最后登录时间"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="system" label="系统"> </el-table-column>

        <el-table-column prop="register_utm_source" label="渠道">
        </el-table-column>
        <el-table-column prop="sources" label="注册来源"> </el-table-column>
        <el-table-column prop="ip" label="IP" width="180"> </el-table-column>
        <el-table-column prop="useVersion" label="使用版本"> </el-table-column>
        <el-table-column prop="" label="用户详情" width="100px" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="detailsBtn(scope.row)"
              plain
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" fixed="right">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.state == 0
                ? "正常"
                : scope.row.state == 1
                ? "封禁"
                : "已注销"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="300px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="userBanBtn(scope.row)"
              plain
              v-if="scope.row.state == 0"
              >封禁用户</el-button
            >
            <el-button
              size="small"
              type="success"
              @click="unsealBtn(scope.row)"
              plain
              v-if="scope.row.state == 1"
              >解封用户</el-button
            >
            <el-button
              v-if="scope.row.identity != '注册用户' && scope.row.state != 2"
              size="small"
              type="warning"
              @click="recommended(scope.row)"
              plain
              >{{ scope.row.recommended == 1 ? "取消" : "" }}推荐</el-button
            >
            <el-button
              size="small"
              type="info"
              @click="Binding(scope.row)"
              v-if="scope.row.state != 2"
              :loading="bol"
              plain
              >绑定小号</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="plbox">
        <el-button @click="exportID" size="small" plain>导出用户ID</el-button>
        <el-button
          type="primary"
          :disabled="userType == 1"
          @click="pltj"
          size="small"
          plain
          >批量推荐</el-button
        >
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="userList"
      />

      <!-- 封禁弹框 -->
      <el-dialog title="封禁账户" :visible.sync="dialogVisible" width="40%">
        <div class="dialogBox">
          <p>
            <span>用户ID</span>
            <el-input
              v-model="idB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span>用户昵称</span>
            <el-input
              v-model="nameB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span class="addRedStar">违规原因</span>
            <el-radio v-model="banReason" label="资料作假">资料作假</el-radio>
            <el-radio v-model="banReason" label="广告营销">广告营销</el-radio>
            <el-radio v-model="banReason" label="诈骗托儿">诈骗托儿</el-radio>
            <el-radio v-model="banReason" label="色情低俗">色情低俗</el-radio>
            <el-radio v-model="banReason" label="恶意骚扰">恶意骚扰</el-radio>
            <el-radio v-model="banReason" label="其他">其他</el-radio>
          </p>
          <p>
            <span class="addRedStar">封禁功能</span>
            <el-checkbox-group v-model="banType">
              <el-checkbox label="1">封禁账号</el-checkbox>
              <!-- <el-checkbox label="2">封禁匹配</el-checkbox>
              <el-checkbox label="3">封禁预约</el-checkbox>
              <el-checkbox label="4">封禁充值</el-checkbox>
              <el-checkbox label="5">封禁提现</el-checkbox> -->
            </el-checkbox-group>
          </p>
          <p>
            <span class="addRedStar">封禁时间</span>
            <el-radio v-model="banDays" label="1">1天</el-radio>
            <el-radio v-model="banDays" label="3">3天</el-radio>
            <el-radio v-model="banDays" label="7">7天</el-radio>
            <el-radio v-model="banDays" label="15">15天</el-radio>
            <el-radio v-model="banDays" label="30">30天</el-radio>
            <el-radio v-model="banDays" label="-1">永久</el-radio>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="banBtn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 解封弹框 -->
      <el-dialog title="解封操作" :visible.sync="dialogVisibleB" width="40%">
        <div class="dialogBox">
          <p>
            <span>用户ID</span>
            <el-input
              v-model="idB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span>用户昵称</span>
            <el-input
              v-model="nameB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span>当前封禁功能</span>
            <el-checkbox-group class="jiefengGroup" v-model="banTypeB">
              <el-checkbox label="1" disabled>封禁账号</el-checkbox>
              <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
              <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
              <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
              <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
            </el-checkbox-group>
            <span class="jiefengSpan">解封时间</span>
            <el-input v-model="dayB" placeholder="解封时间" disabled></el-input>
            <span class="jiefengSpan">封禁原因</span>
            <el-input
              v-model="reasonB"
              placeholder="封禁原因"
              disabled
            ></el-input>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleB = false">取 消</el-button>
          <el-button type="primary" @click="unseal">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 绑定小号 -->
      <el-dialog title="绑定小号" :visible.sync="dialogVisibleC" width="40%">
        <el-descriptions title="主账号" :column="2" border>
          <el-descriptions-item label="ID">
            {{ idB }}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{ nameB }}
          </el-descriptions-item>
        </el-descriptions>
        <h3 style="margin: 20px 0 10px">绑定小号</h3>
        <div class="addRobot">
          <span> <i style="color: red">*</i> 小号请求的通话将转接给主号</span>
          <el-button size="small" class="btn" @click="addRobot"
            >新增小号</el-button
          >
        </div>
        <el-table
          :data="robotList"
          :header-cell-style="{ background: '#f5f7fa' }"
          style="width: 100%"
        >
          <el-table-column prop="id" label="记录id"> </el-table-column>
          <el-table-column prop="account" label="机器人手机号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.account"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.id"
                size="small"
                plain
                type="warning"
                @click="unbind(scope.row.id)"
                >解除绑定</el-button
              >
              <el-button
                v-if="!scope.row.id"
                size="small"
                plain
                type="primary"
                @click="addRobotSubmit(scope.row.account)"
                >确认添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- <div class="list">
          <div
            class="list_item"
            v-for="(item, index) in childAccount"
            :key="index"
          >
            <el-input v-model="childAccount[index]"></el-input
            ><el-button>确定</el-button>
          </div> -->
        <!-- </div> -->
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  userList,
  userBan,
  userRecommended,
  AdminRobotUserBindRobotList,
  AdminRobotUserBindRobot,
  AdminRobotUserUnBindRobot,
} from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      names: "",
      status: "",
      lossStart: "",
      lossEnd: "",
      utm_channel_val: "",
      sources_val: "",
      sources: [],
      utm_channel: [],
      loading: true,
      curId: 0,
      userType: "",
      items: [
        { item: "", label: "全部" },
        { item: "ios", label: "ios" },
        { item: "android", label: "android" },
      ],
      id: "", //ID
      name: "", //昵称
      phone: "", //手机号
      indexB: "",
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      userTimeValStartDate: "",
      userTimeValEndDate: "",
      InvitationCode: "", //邀请码
      userTimeVal: "", //时间日期
      options: [
        {
          value: "",
          label: "不限性别",
        },
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      userOptionVal: "", //性别下拉框选择

      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      // 封禁弹框
      dialogVisible: false,
      id: "",
      name: "",
      banReason: "", //违规原因
      banType: ["1"], //封禁功能
      banDays: "", //封禁时间

      // 解封弹框
      dialogVisibleB: false,
      idB: "",
      nameB: "",
      banTypeB: "",
      reasonB: "",
      dayB: "",
      //绑定小号
      dialogVisibleC: false,
      childAccount: ["123", "5165", "9874554"],
      //选中数组
      targetArr: [],
      robotList: [],
      bol: false,
    };
  },
  methods: {
    // 导出表格
    exportExcel() {
      userList({
        page: 1,
        pageSize: this.total,
        startTime: this.userTimeValStartDate,
        endTime: this.userTimeValEndDate,
        id: this.id,
        name: this.name,
        phone: this.phone,
        type: this.names,
        identity: this.userType,
        sex: this.userOptionVal,
        code: this.InvitationCode,
        status: this.status,
        lossStart: this.lossStart,
        lossEnd: this.lossEnd,
        sources: this.sources_val == "不限" ? "" : this.sources_val,
        utm_channel: this.utm_channel_val == "不限" ? "" : this.utm_channel_val,
      }).then((res) => {
        if (res.code == 0) {
          res.data.list.forEach((item) => {
            item.state =
              item.state == 0 ? "正常" : item.state == 1 ? "封禁" : "已注销";
          });
          const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
          const tHeader = [
            "头像",
            "用户id",
            "注册时间",
            "最后登录时间",
            "用户昵称",
            "手机号",
            "性别",
            "系统",
            "渠道",
            "注册来源",
            "IP",
            "状态",
            "身份",
          ];
          const filterVal = [
            "avatar",
            "id",
            "registrationTime",
            "last_login_time",
            "name",
            "phone",
            "sex",
            "system",
            "register_utm_source",
            "sources",
            "ip",
            "state",
            "identity",
          ];
          const list = res.data.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, "用户列表"); //最后一个是表名字
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //用户列表
    userList() {
      this.loading = true;
      userList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.userTimeValStartDate,
        endTime: this.userTimeValEndDate,
        id: this.id,
        name: this.name,
        phone: this.phone,
        type: this.names,
        identity: this.userType,
        sex: this.userOptionVal,
        status: this.status,
        lossStart: this.lossStart,
        lossEnd: this.lossEnd,
        code: this.InvitationCode,
        sources: this.sources_val == "不限" ? "" : this.sources_val,
        utm_channel: this.utm_channel_val == "不限" ? "" : this.utm_channel_val,
      }).then((res) => {
        if (res.code == 0) {
          this.utm_channel = res.data.utm_channel;
          this.sources = res.data.sources;
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
          this.utm_channel.unshift("不限");
          this.sources.unshift("不限");
        }
      });
    },

    //用户列表查询
    userListBtn() {
      if (this.page !== 1) {
        this.page = 1;
      }
      this.userList();
    },
    //详情
    detailsBtn(row) {
      this.$router.push({
        path: "/UserManagement/UserDetails",
        query: {
          id: row.id,
        },
      });
    },
    //封禁
    userBanBtn(row) {
      this.dialogVisible = true;
      this.idB = row.id;
      this.nameB = row.name;
    },
    banBtn() {
      if (this.banType.length !== 0 && this.banReason && this.banDays !== "") {
        userBan({
          id: this.idB,
          ban: 1,
          banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
          reason: this.banReason, //封禁原因类型
          day: this.banDays, //封禁天数
        }).then((res) => {
          if (res.code == 0) {
            this.dialogVisible = false;
            this.$message({
              message: "封禁成功",
              type: "success",
            });
            // this.reload();
            this.userList();
          }
        });
      } else {
        this.$message({
          message: "必填封禁选项",
          type: "warning",
        });
      }
    },
    //解封
    unsealBtn(row) {
      this.dialogVisibleB = true;
      this.idB = row.id;
      this.nameB = row.name;

      this.banTypeB = row.banType; //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
      this.reasonB = row.banReason; //封禁原因类型
      this.dayB = row.banDays; //封禁天数
    },
    unseal() {
      userBan({
        id: this.idB,
        ban: 0,
        banType: this.banTypeB, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
        reason: this.reasonB, //封禁原因类型
        day: this.dayB, //封禁天数
      }).then((res) => {
        if (res.code == 0) {
          this.dialogVisibleB = false;
          this.$message({
            message: "解封成功",
            type: "success",
          });
          // this.reload();
          this.userList();
        }
      });
    },
    //时间
    focus(time) {
      if (!this.userTimeVal) {
        this.userTimeVal = [];
      }
      this.userTimeValStartDate = this.userTimeVal[0];
      this.userTimeValEndDate = this.userTimeVal[1];
    },
    //handleSelectionChange
    handleSelectionChange(arr) {
      this.targetArr = arr;
    },
    //绑定小号
    async Binding(obj) {
      this.bol = true;
      try {
        const res = await AdminRobotUserBindRobotList({
          user_id: obj.id,
        });
        if (res.code == 0) {
          this.bol = false;
          this.robotList = res.data.list;
          this.idB = obj.id;
          this.nameB = obj.name;
          this.dialogVisibleC = true;
        }
      } catch {
        this.bol = false;
        this.$message.error("获取小号信息错误！");
      }
    },
    //新增一行小号
    addRobot() {
      this.robotList.push({ id: "", account: "", id_code: "" });
    },
    //添加
    async addRobotSubmit(account) {
      if (!account.trim()) {
        return this.$message.error("手机号不能为空！");
      }
      const res = await AdminRobotUserBindRobot({
        user_id: this.idB,
        account,
      });
      if (res.code == 0) {
        this.$message.success("添加成功！");
        AdminRobotUserBindRobotList({
          user_id: this.idB,
        }).then((res) => {
          if (res.code == 0) {
            this.robotList = res.data.list;
          }
        });
      }
    },
    async unbind(id) {
      const res = await AdminRobotUserUnBindRobot({
        user_id: this.idB,
        id,
      });
      if (res.code == 0) {
        this.$message.success("解绑成功！");
        AdminRobotUserBindRobotList({
          user_id: this.idB,
        }).then((res) => {
          if (res.code == 0) {
            this.robotList = res.data.list;
          }
        });
      }
    },
    //推荐
    recommended(obj) {
      let txt = obj.recommended == 1 ? "取消推荐" : "推荐";
      let userType;
      switch (obj.identity) {
        case "注册用户":
          break;
        case "认证用户":
          userType = "2";
          break;
        case "工会认证用户":
          userType = "3";
          break;
        case "合作认证用户":
          userType = "4";
          break;
      }
      this.$confirm("是否" + txt + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userRecommended({
            user_id: [obj.id],
            type: userType,
            recommended: obj.recommended == 1 ? "0" : "1",
          });
          if (res.code == 0) {
            this.userList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //批量推荐
    pltj() {
      if (this.targetArr.length == 0) {
        return this.$message.error("未选中用户！");
      }
      this.targetArr = this.targetArr.filter((item) => {
        return item.identity != "注册用户";
      });
      let idArr = this.targetArr.map((item) => {
        return item.id;
      });
      console.log(idArr);
      this.$confirm("是否批量推荐" + idArr.join(",") + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userRecommended({
            user_id: idArr,
            type: this.userType,
            recommended: "1",
          });
          if (res.code == 0) {
            this.userList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.targetArr = [];
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //导出用户ID
    exportID() {
      if (this.targetArr.length == 0) {
        return this.$message.error("未选中用户！");
      }
      let list = this.targetArr.map((item) => {
        return { id: item.id };
      });
      this.$excel(list, [""], ["id"], "用户ID");
    },
  },
  created() {
    this.userList();
  },
  computed: {
    imgArr: () => {
      return (arr) => {
        let imgList = [];
        arr.forEach((item) => {
          imgList.push(item.avatar);
        });
        return imgList;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.UserManagementList {
  margin: 30px;
  height: 100%;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 180px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-table {
    .imgBox {
      padding: 8px 0 0;
      position: relative;
    }
    .imgV {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0px;
      right: -3px;
    }
    .img {
      width: 70px;
      height: 70px;
      border-radius: 10px;
    }
    .spanA {
      width: 14px;
      height: 14px;
      background: #0df534;
      display: inline-block;
      border-radius: 7px;
      position: absolute;
      bottom: 6px;
      right: 4px;
    }
    .spanB {
      width: 14px;
      height: 14px;
      background: #ccc;
      display: inline-block;
      border-radius: 7px;
      position: absolute;
      bottom: 6px;
      right: 4px;
    }
  }
  .el-pagination {
    margin: 0px;
  }
  .box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-input {
      width: 300px;
      .el-input-group__prepend {
        width: 110px;
      }
    }
  }
  .plbox {
    margin-top: 20px;
  }

  .dialogBox {
    p {
      display: flex;
      span {
        width: 100px;
        line-height: 40px;
      }
      .el-radio,
      .el-checkbox-group {
        line-height: 40px;
      }
      .el-input {
        width: 200px;
      }
      .jiefengSpan {
        text-align: right;
        margin-right: 10px;
      }
      .jiefengGroup {
        margin-left: 10px;
      }
    }
  }
  .addRedStar:before {
    content: "*";
    color: red;
    font-size: 18px;
  }
  .list {
    margin-top: 20px;

    .list_item {
      margin-bottom: 10px;
      .el-input {
        width: 200px;
        margin-right: 80px;
      }
    }
  }
  .addRobot {
    display: flex;
    justify-content: space-between;
  }
}
</style>